.bin-calendar {
  padding: 12px 20px 35px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  ul > li {
    list-style: none;
    margin: 0;
  }

  .bin-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;

    &-title {
      color: var(--bin-color-text-primary);
      align-self: center;
      font-size: var(--bin-font-size-default);
    }
  }

  .bin-calendar-week {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;

    &-item {
      flex: 1;
      text-align: center;
      font-size: var(--bin-font-size-default);
      color: var(--bin-color-text-default);
      line-height: var(--bin-base-line-height);
      font-weight: 500;
      padding: 10px 0;
    }
  }

  .bin-calendar-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top: var(--bin-border-base);
    border-left: var(--bin-border-base);
  }

  .bin-calendar-date-view {
    width: 14.285%;
    height: 80px;
    line-height: var(--bin-base-line-height);
    padding: 8px;
    border-right: var(--bin-border-base);
    border-bottom: var(--bin-border-base);
    cursor: pointer;

    &.is-current-day,
    &.is-selected {
      color: var(--bin-color-primary);
    }

    &.is-selected,
    &:hover {
      background-color: var(--bin-color-primary-light5);
    }

    &.prev,
    &.next {
      color: var(--bin-color-text-disabled);
    }
  }

  &.card {
    width: 300px;

    .bin-calendar-header {
      padding: 10px;
    }

    .bin-calendar-date-view {
      padding: 0;
      height: 34px;
      line-height: 34px;
      text-align: center;
    }
  }
}
